<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/buy.class.css" />
		<link rel="stylesheet" href="js/1.0.8/iconfont.min.css">

		<title></title>
	</head>

	<body>
		<div class="TopDiv">
			<a href="../shouye/index.html" class="TopDiv" style="text-decoration: none;">
				<div class="TopDiv-1">
					<i class="Hui-iconfont">&#xe67d</i>
				</div>
				<div class="TopDiv-2">
					美食
				</div>
			</a>
		</div>
		<div class="buyClass">
			<div class="buyClass-1">
				美食<span class="glyphicon glyphicon-triangle-bottom"></span>
			</div>
			<div class="buyClass-2">
				排序<span class="glyphicon glyphicon-triangle-bottom"></span>
			</div>
			<div class="buyClass-3">
				筛选<span class="glyphicon glyphicon-triangle-bottom"></span>
			</div>
		</div>

		<div class="buyClass-1-1" style="margin-top: 8.08rem;">
			<div class="buyClass-1-01">
				<div class="buyClass-1-01-1">
					<div></div><div>美食</div><div class="span2">168</div>
				</div>
				<div class="buyClass-1-01-1">
					<div class="glyphicon "><img src="img/533cf9617bd57fe1dfb05603bebcfpng.png"></div><div class="ziti">快餐便当</div><div class="span2">360</div>
					<div>&gt;</div>
				</div>
				<div class="buyClass-1-01-1">
					<div class="glyphicon "><img src="img/a7eda7659bac613e524ca7c1ae12epng.png"></div><div class="ziti">特色菜色</div><div class="span2">450</div>
					<div>&gt;</div>
				</div>
				<div class="buyClass-1-01-1">
					<div class="glyphicon "><img src="img/ac1bfd1e818013a9f099e964f1e9djpeg.jpeg.png"></div><div class="ziti">异国料理</div><div class="span2">400</div>
					<div>&gt;</div>
				</div>
				<div class="buyClass-1-01-1">
					<div class="glyphicon "><img src="img/bf6efbfdb0ef701f19689a5529e5fjpeg.jpeg.png"></div><div class="ziti">小吃夜宵</div><div class="span2">360</div>
					<div>&gt;</div>
				</div>
			</div>
			<div class="buyClass-1-02">
				<div class="buyClass-1-02-1">
					全部快餐便当
					<span></span>
				</div>
				<div class="buyClass-1-02-1">
					全部快餐便当
					<span></span>
				</div>
				<div class="buyClass-1-02-1">
					全部快餐便当
					<span></span>
				</div>
				<div class="buyClass-1-02-1">
					全部快餐便当
					<span></span>
				</div>
				<div class="buyClass-1-02-1">
					全部快餐便当
					<span></span>
				</div>
				<div class="buyClass-1-02-1">
					全部快餐便当
					<span></span>
				</div>

			</div>
		</div>
		<div class="buyClass-1-2" style="margin-top: 8.08rem;">
			<div class="buyClass-1-2-1">
				<span class="glyphicon glyphicon-sort"></span>
				<div><i class="Hui-iconfont" style="font-size: 1.2rem;color: cornflowerblue;">&#xe675</i></div>
				<div>智能排序</div>
			</div>
			<div class="buyClass-1-2-1">
				<span class="glyphicon glyphicon-sort"></span>

				<div><i class="Hui-iconfont" style="font-size: 1.2rem;color: red;">&#xe6c1</i></div>
				<div>销量最高</div>

			</div>
			<div class="buyClass-1-2-1">
				<span class="glyphicon glyphicon-sort"></span>
				<div><i class="Hui-iconfont" style="font-size: 1.2rem;color: cornflowerblue;">&#xe6c9</i></div>
				<div>距离最近</div>

			</div>
			<div class="buyClass-1-2-1">
				<span class="glyphicon glyphicon-sort"></span>
				<div><i class="Hui-iconfont" style="font-size: 1.2rem;color: #EC971F;">&#xe669</i></div>
				<div>起送价最低</div>

			</div>
			<div class="buyClass-1-2-1">
				<span class="glyphicon glyphicon-sort"></span>
				<div><i class="Hui-iconfont" style="font-size: 1.2rem;color: cornflowerblue;">&#xe690</i></div>
				<div>配送速度最快</div>

			</div>
			<div class="buyClass-1-2-1">
				<span class="glyphicon glyphicon-sort"></span>
				<div><i class="Hui-iconfont" style="font-size: 1.2rem;color: #EC971Fs;">&#xe6ff</i></div>
				<div>评分最高</div>

			</div>
		</div>
		<div class="buyClass-1-3" style="margin-top: 8.08rem;">

		</div>
		<div class="mainDiv" style="margin-top: 8.08rem;">
			<div class="divMain-2" v-for="nier in list" @click="href(nier.id)">
				<div class="divMain-2-1">
					<img src="../shouye/{{nier.attributes.shopimg}}" />
				</div>
				<div class="divMain-2-2">
					<div v-html="nier.attributes.shopname" class="divMain-2-2-1">
						肆年飞驰快送就大点的
					</div>
					<div class="divMain-2-2-2">
						<!--<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>-->
						<span class="span1" v-html="nier.attributes.grade">4.4</span> 月售<span v-html="nier.attributes.salenum"></span>单
					</div>
					<div class="divMain-2-2-3">
						￥<span v-html="nier.attributes.startprice"></span>起送/配送费￥<span v-html="nier.attributes.sendprice"></span>
					</div>
				</div>
			</div>

		</div>

		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/buy.class.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/av-min-2.1.2.js"></script>
		<script type="text/javascript">
			var APP_ID = 'c4w6bVvWfh8xxcmkBE1G0gIt-gzGzoHsz';
			var APP_KEY = 'JBikg4Ksk76zcTi5BKYWvTJF';
			AV.init({
				appId: APP_ID,
				appKey: APP_KEY
			});
			var myvue = new Vue({
				el: "body",
				data: {
					list: ""
				},
				methods: {
					href: function(e) {
						location.href = "../xiangqing/shopmain.html?id=" + e
					}
				}
			})
			var query = new AV.Query('ELM_shop');
			query.find().then(function(e) {
				myvue.list = e;
				console.log(e)
					//				var shangpintu = document.getElementsByClassName('shangpintu');
					//				for(var i = 0; i < shangpintu.length; i++){
					//					console.log(e[i].attributes.shopimg);
					//					shangpintu[i].src= e[i].attributes.shopimg;
					//					console.log(shangpintu[i].src);
					//			    }
			})
		</script>
	</body>

</html>